<%# leaving #spree-header div for legacy support  %>
<% cache spree_nav_cache_key('header') do %>
  <div id="spree-header" data-turbolinks-permanent>
    <header id="header" class="d-flex align-items-center header-spree border-bottom">
      <div class="container-fluid h-100 header-spree-fluid">
        <div class="d-flex flex-nowrap align-items-center h-100">
          <div class="d-xl-none flex-grow-1 header-spree-fluid-mobile-menu-toggler">
            <button class="navbar-toggler border-0 px-0 d-flex" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-label="<%= Spree.t('nav_bar.show_menu') %>">
              <%= icon(name: 'burger',
                      width: 18.5,
                      height: 16) %>
            </button>
          </div>
          <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo m-0">
            <%= logo %>
          </figure>
          <div id="main-nav-bar" class="flex-grow-0 d-none d-xl-block h-100 header-spree-fluid-primary-navigation">
            <%= render partial: 'spree/shared/main_nav_bar' %>
          </div>
          <div id="top-nav-bar" class="flex-grow-1 header-spree-fluid-secondary-navigation">
            <%= render partial: 'spree/shared/nav_bar' %>
          </div>
          <%= render partial: 'spree/shared/mobile_navigation' %>
        </div>
      </div>
    </header>
  </div>
<% end %>
